<template>
	<view class="updataAddress">
		<view class="address">
			<view class="item">
				<!-- <text>收货人:李元芳</text> -->
				<label for="">收货人:</label>
				<input type="text" v-model="userAddress.customName" />
				<navigator url="">
					<image src="../../static/icons/zjc/icon_updata_address@2x.png" class="person_icon"></image>
				</navigator>
			</view>
			<view class="item">
				<label for="">联系电话:</label>
				<input type="text" v-model="userAddress.telephone" />
			</view>
			<view class="item">
				<label for="">收货地址:</label>
				<input type="text" v-model="userAddress.address" />
			</view>
			<view class="item">
				<label for="">备注:</label>
				<input type="text" v-model="userAddress.remark" />
			</view>
		</view>
		<view class="set_address">
			<view class="text">
				<text class="big">设置为默认地址</text>
				<text class="min">设置过后每次下单后系统默认使用该地址</text>
			</view>
			<switch checked=""  class="btn" />
		</view>
		<view class="save">
			<button type="default" class="save_btn" @tap="saveAddress">
				保存使用
			</button>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users");
	export default {
		data() {
			return {
				isChecked: false,
				addressId: "",
				userAddress: {}
			}
		},
		onLoad(options) {
			this.addressId = options.id;
			this.mylookAddress(); //获取用户所有收货地址
			this.userAddress = this.customerAddress.filter(item => item.id == this.addressId)[0]; //用户需要修改的地址
		},
		methods: {
			setDefault() {
				this.userAddress.isdefault = !this.userAddress.isdefault;
			},
			...mapActions(["myUpdataAddress", "mylookAddress"]),
			async saveAddress() {
				const res = await this.myUpdataAddress(this.userAddress);
				console.log(res);
				//判断是否修改成功
				if (res.result) {
					uni.showModal({
						title: "提示",
						content: "修改成功",
						showCancel: false
					});
					//修改成功后跳转
					uni.navigateTo({
						url: "../addAddress/addAddress"
					});
				}
			}
		},
		computed: {
			...mapState(["customerAddress"]), //用户所有收货地址
		}
	}
</script>

<style>
	.address {
		box-sizing: border-box;
		padding: 0 58rpx 0 68rpx;
		margin-top: 26rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.address {
		margin-top: 34rpx;
	}

	.address .item {
		border-bottom: solid 1rpx #dadada;
		display: flex;
		margin-bottom: 34rpx;
		height: 56rpx;
	}

	.address .item label {
		margin-right: 10rpx;
	}

	.address .item .person_icon {
		width: 60rpx;
		height: 60rpx;
		margin-top: -8rpx;
		margin-left: 130rpx;
	}

	.address .item input {
		margin-left: 10rpx;
	}

	.set_address {
		margin-top: 20rpx;
		width: 750rpx;
		height: 112rpx;
		background-color: #ffffff;
		display: flex;
		box-sizing: border-box;
		padding: 24rpx 60rpx 22rpx 66rpx;
		margin-bottom: 42rpx;
	}

	.set_address .text {
		display: flex;
		flex-direction: column;
		margin-right: 150rpx;
	}

	.set_address .text .big {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #232323;
	}

	.set_address .text .min {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #a2a2a2;
	}

	.save .save_btn {
		width: 350rpx;
		height: 84rpx;
		background-color: #f5610c;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #ffffff;
	}
</style>
